/* =====================================================================
   Colors.css (optimized and duplicate-free)
   - Only: colors, surfaces, shadows, variants (skin)
   - Components (card/input/progress/button) here ONLY if they are “skin”
   - Avoid repeating .btn twice
   ===================================================================== */

/* ===== 0) DESIGN TOKENS ===== */
:root{
  /* Brand */
  --gold: #c8a45d;
  --gold-soft: #e2c98a;

  /* Neutrals */
  --white: #ffffff;
  --gray-100: #f5f6f7;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;

  /* Navy scale */
  --navy-900: #1f2a36;
  --navy-800: #243445;
  --navy-700: #2f4154;

  /* Accents */
  --blue-gray: #3b506b;
  --blue-gray-soft: #5b7394;

  /* Status */
  --success: #9ac48a;
  --green: #468a4e;
  --charcoal: #202b3b;
  --red_erro:rgb(241, 0, 0);

  /* Surface */
  --panel: #dbdbdb;

  /* Shadows */
  --sh-soft: 0 12px 30px rgba(0,0,0,.08);
  --sh-hover: 0 12px 30px rgba(21,21,22,.545);

  /* Motion */
  --ease: cubic-bezier(0.4,0,0.2,1);
}

/* ===== 1) TEXT COLORS ===== */
.txt-white{ color: var(--white); }
.txt-dark{ color: var(--navy-900); }
.txt-muted{ color: var(--gray-500); }
.txt-gold{ color: var(--gold); }
.txt-erro{color: var(--red_erro);}

/* If you want to keep these names, that's fine,
   but you already have .h1_hero, etc. in Main.css */
.h1-main{ color: var(--white); font-weight: 600; }
.h2-card{ color: var(--white); font-weight: 500; }
.h3-block{ color: var(--navy-900); font-weight: 600; }

/* ===== 2) BACKGROUNDS / SECTIONS ===== */
.bg-hero{
  background: radial-gradient(120% 120% at 50% 0%, var(--navy-700), var(--navy-900));
}
.section-dark{
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
}
.section-light{ background: var(--gray-100); }

.bg-panel{ background: var(--panel); }
.bg-card{ background: var(--white); }
.bg-dark{ background: var(--navy-900); }
.bg-gold{ background: var(--gold); }
.bg-green{ background: var(--green); }
.bg-gray{ background: var(--charcoal); }
.bg-red{ background: var(--red_erro); }

/* ===== 3) CARD (skin) ===== */
.card{
  background: var(--white);
  box-shadow: var(--sh-soft);
}
.card--dark{
  background: var(--panel);
  box-shadow: none;
}
.card--hover{
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card--hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-hover);
}

/* ===== BORDER COLORS ===== */
.border-blue-gray{ border: solid var(--blue-gray); }
.border-gold{ border: solid var(--gold); }

/* ===== 4) LEFT ACCENT ===== */
/* unified to avoid repeating border-left 3 times */
.left-accent{
  border-left: 20px solid var(--accent, var(--gold));
  border-radius: 5px;
}
.left-accent--gold{ --accent: var(--gold); }
.left-accent--green{ --accent: var(--green); }
.left-accent--gray{ --accent: var(--charcoal); }

/* ===== 5) KPI ===== */
.kpi-value{ color: var(--gold); font-size: 1.6rem; font-weight: 600; }
.kpi-label{ color: var(--gray-500); font-size: .85rem; }

/* ===== 6) PROGRESS / BAR (skin) ===== */
.bar{
  height: 36px;
  background: linear-gradient(90deg,#e6e6e6,#dcdcdc);
}
.bar--gold{
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  color: var(--white);
  font-weight: 600;
}

/* ===== 7) INPUT (skin) ===== */
.input{
  background: var(--white);
  border: 1px solid var(--gray-300);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(200,164,93,.18);
}

/* ===== 8) BUTTON SKINS (variants only)
   IMPORTANT:
   - The base .btn already exists in Main.css (structure)
   - Here we only keep variant styles
   - If you want the base .btn to live here, I can move it
   ============================================================ */

/* sizes (optional) */
.btn--sm{ padding: 8px 18px; font-size: .85rem; }
.btn--lg{ padding: 14px 34px; font-size: 1.05rem; border-radius: 20px; }

/* Primary (gold) */
.btn--gold{
  background: var(--gold);
  color: var(--white);
  border-color: transparent;
}
.btn--gold:hover{ background: var(--gold-soft); }

/* Secondary (blue-gray) */
.btn--secondary{
  background: var(--blue-gray);
  color: var(--white);
  border-color: transparent;
}
.btn--secondary:hover{ background: var(--blue-gray-soft); }

/* Success */
.btn--green{
  background: var(--green);
  color: var(--white);
  border-color: transparent;
}
.btn--green:hover{ background: #5aa163; }

/* Dark */
.btn--dark{
  background: var(--navy-900);
  color: var(--white);
  border-color: transparent;
}
.btn--dark:hover{ background: var(--navy-800); }

/* Light */
.btn--light{
  background: var(--white);
  color: var(--navy-900);
  border-color: var(--gray-300);
}
.btn--light:hover{ background: var(--gray-100); }

/* Ghost */
.btn--ghost{
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn--ghost:hover{ background: rgba(255,255,255,.1); }

/* Gold outline */
.btn--outline-gold{
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn--outline-gold:hover{ background: rgba(200,164,93,.12); }

/* states */
.pill.is-active{
  background: var(--gold);
  color: var(--white);
  border-color: transparent;
}

/* icons inside buttons */
.btn i{ font-size: 1.1em; line-height: 1; }

/* ===== 9) ICONS (skin) ===== */
.icon-round{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
}